$(function() {
    /**
     * 根据屏幕宽度的变化决定轮播图片应该展示什么 5    */
    function resize() {
      // 获取屏幕宽度
      var windowWidth = $(window).width();
      // 判断屏幕属于大还是小
      var isSmallScreen = windowWidth < 768;
      // 根据大小为界面上的每一张轮播图设置背景
      $('#main_ad > .carousel-inner > .item').each(function(i, item) {
        var $item = $(item);
        // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
        var imgSrc =
          isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
        // 设置背景图片
        $item.css('backgroundImage', 'url("' + imgSrc + '")');
        //
        // 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式
        if (isSmallScreen) {
          $item.html('<img src="' + imgSrc + '" alt="" />');
        } else {
          $item.empty();
        }
      });
    }
    // // 让window对象立即触发一下resize，初始化div的背景图
    // $(window).trigger('resize');
  
  
    $(window).on('resize', resize).trigger('resize');
  });